<template>
  <div class="toolbar">
    <div>
      <el-button :disabled="!state.canUndo" type="primary" @click="undo">
        撤销
      </el-button>
      <el-button :disabled="!state.canRedo" type="primary" @click="redo">
        重做
      </el-button>
    </div>
    <div>
      <el-button type="primary" @click="clearForm">清空表单</el-button>
      <el-button type="primary" @click="previewForm">预览效果</el-button>
      <el-button type="primary" @click="importJSON">导入JSON</el-button>
      <el-button type="primary" @click="exportJSON">导出JSON</el-button>
      <el-button type="primary" @click="exportSFCCode">导出代码</el-button>
      <el-button type="primary" @click="exportSFCFile">生成SFC</el-button>
    </div>
  </div>
  <!-- 预览效果 -->
  <div v-if="state.showPreviewDialog">
    <preview-Dialog
      :designer="designer"
      v-model:showPreviewDialog="state.showPreviewDialog"
    />
  </div>
  <!-- 代码展示 -->
  <div v-if="state.showCodeDialog">
    <show-code-dialog
      :title="state.title"
      :mode="state.mode"
      :userWorker="state.userWorker"
      v-model:showCodeDialog="state.showCodeDialog"
      :code="state.code"
    />
  </div>
  <div v-if="state.showImportJSONDialog">
    <ImportJSONDialog
      :content="state.code"
      v-model:showDialog="state.showImportJSONDialog"
      @importJSON="importJSONHandle"
    ></ImportJSONDialog>
  </div>
</template>
<script setup>
import { computed, reactive, inject } from 'vue'

import ShowCodeDialog from './components/showCodeDialog.vue'
import ImportJSONDialog from './components/importJSONDialog.vue'
import PreviewDialog from './components/previewDialog.vue'
import { generateCode } from '@/utils/code-generator'
import { sfcGenerator } from '@/utils/sfc-generator'
const designer = inject('designer')

const state = reactive({
  canUndo: computed(() => designer.command.canUndo()),
  canRedo: computed(() => designer.command.canRedo()),
  showPreviewDialog: false,
  showImportJSONDialog: false,
  code: '',
  title: '',
  mode: '',
  userWorker: true,
})
const undo = () => {
  designer.command.undo()
}
const redo = () => {
  designer.command.redo()
}
const clearForm = () => {
  designer.clearWidget()
}
const previewForm = () => {
  state.showPreviewDialog = true
}

const importJSON = () => {
  state.showImportJSONDialog = true
  state.code = JSON.stringify(
    {
      widgetList: designer.widgetList,
      formConfig: designer.formConfig,
    },
    null,
    '  ',
  )
}
const importJSONHandle = (v) => {
  const data = JSON.parse(v)
  designer.addWidgetListByJSON(data)
}
const exportJSON = () => {
  state.title = '导出JSON'
  // 处理掉render时不需要的属性
  const { widgetList } = handleWidgetList(designer)
  // 需要格式化JSON字符串，否则编辑插件显示不换行
  state.code = JSON.stringify(
    {
      widgetList,
      formConfig: designer.formConfig,
    },
    null,
    '  ',
  )
  state.mode = 'json'
  state.showCodeDialog = true
}
const handleWidgetList = (widget) => {
  const { type, options, category } = widget
  const data = {
    type,
    options,
    category,
  }
  const children = widget.cols ?? widget.widgetList ?? []
  if (widget.cols) data.cols = []
  if (widget.widgetList) data.widgetList = []
  for (let i of children) {
    data.cols
      ? data.cols.push(handleWidgetList(i))
      : data.widgetList.push(handleWidgetList(i))
  }
  return data
}

// 导出vue组件代码
const exportSFCCode = () => {
  state.code = generateCode({
    widgetList: designer.widgetList,
    formConfig: designer.formConfig,
  })
  state.mode = 'html'
  state.userWorker = false // 用来解决编辑器对vue格式报错的问题
  state.showCodeDialog = true
}
// 导出单文件组件
const exportSFCFile = () => {
  state.code = sfcGenerator({
    widgetList: designer.widgetList,
    formConfig: designer.formConfig,
  })
  state.mode = 'html'
  state.userWorker = false // 用来解决编辑器对vue格式报错的问题
  state.showCodeDialog = true
}
</script>
<style lang="less">
.toolbar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
</style>
